<template>
    <div class="loginbody">
        <div class="logindata">
            <div class="logintext">
                <h2>Welcome</h2>
            </div>
            <div class="formdata">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" clearable placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" clearable placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="tool">
                <div>
                    <el-checkbox v-model="checked" @change="remenber">记住密码</el-checkbox>
                </div>
                <div>
                    <span class="shou" @click="forgetpas">忘记密码？</span>
                </div>
            </div>
            <div class="butt">
                <el-button type="primary" @click.native.prevent="login">登录</el-button>
                <el-button class="shou" @click="showRegisterDialog">注册</el-button>
                <el-dialog :visible.sync="registerDialogVisible" title="注册">
                    <el-form @submit.prevent="register" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="registerUsername" required></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="registerPassword" type="password" required></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="confirmRegisterPassword" type="text" required></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" native-type="submit" @click="register">注册1</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
    
<script>
import axios from "axios";
export default {
    name: "LoginPage",
    data() {
        return {
            loginUsername: "",
            loginPassword: "",
            registerDialogVisible: false,
            registerUsername: "",
            registerPassword: "",
            confirmRegisterPassword: "",
            form: {
                password: "",
                username: "",
            },
            checked: false,
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { max: 10, message: "不能大于10个字符", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { max: 10, message: "不能大于10个字符", trigger: "blur" },
                ],
            },
        };
    },
    mounted() {
        if (localStorage.getItem("news")) {
            this.form = JSON.parse(localStorage.getItem("news"));
            this.checked = true;
        }
    },
    methods: {
        showRegisterDialog() {
            this.registerDialogVisible = true;
        },
        register() {

            axios
                .post("http://localhost:9527//user//register", {
                    account: this.registerUsername,
                    password: this.registerPassword,
                    name: this.confirmRegisterPassword,
                })
                .then((response) => {
                    console.log(1)
                    if (response.data.code === "00000") {
                        // 登录成功
                        // 存储用户信息至localStorage
                        localStorage.setItem(
                            "user",
                            JSON.stringify(response.data.data)
                        );
                        // 跳转首页
                        this.$router.replace("/index/home");
                    } else {
                        // 展示错误信息
                        this.$message.error(response.data.msg);
                    }
                })

        },

        login() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    axios
                        .post("http://localhost:9527//user//login", {
                            account: this.form.username,
                            password: this.form.password,
                        })
                        .then((response) => {
                            if (response.data.code === "00000") {
                                // 登录成功
                                // 存储用户信息至localStorage
                                localStorage.setItem(
                                    "user",
                                    JSON.stringify(response.data.data)
                                );
                                // 跳转首页
                                this.$router.replace("/index/home");
                            } else {
                                // 展示错误信息
                                this.$message.error(response.data.msg);
                            }
                        });
                } else {
                    console.log("校验失败");
                    return false;
                }
            });
        },
        remenber(data) {
            this.checked = data;
            if (this.checked) {
                localStorage.setItem("news", JSON.stringify(this.form));
            } else {
                localStorage.removeItem("news");
            }
        },
        forgetpas() {
            this.$message({
                type: "info",
                message: "功能尚未开发额😥",
                showClose: true,
            });
        },
    },
};
</script>
<style scoped>
.loginbody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to bottom right, #f1f2b5, #135058);
    font-family: Arial, sans-serif;
}

.logindata {
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.logintext {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bolder;
    color: #135058;
}

.el-input,
.el-checkbox {
    width: 100%;
}

.el-button {
    width: 100%;
    margin-top: 20px;
}

.tool {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    color: #135058;
}

.shou {
    color: #135058;
    cursor: pointer;
    transition: color 0.5s ease;
}

.shou:hover {
    color: #f1f2b5;
}

.butt {
    display: flex;
    justify-content: space-between;
}
</style>
  
  /*ui
  